// Variables to store original dimensions and aspect ratio
var originalMouseX = null;
var originalMouseY = null;
var originalWidth = null;
var originalHeight = null;
var aspectRatio = null;
// Download Function
function download() {
var dt = canvas.toDataURL(mimeType);
$('#downloadresizedimage').attr('download', originalFileName.replace('.', '-' + $('#image-width').val() + 'x' + $('#image-height').val() + '.'));
this.href = dt;
$('#social').fadeIn(5000);
};
downloadresizedimage.addEventListener('click', download, false);
// Mouse Down Event
$('#image-display').mousedown(function (e) {
originalMouseX = e.pageX;
originalMouseY = e.pageY;
originalWidth = parseInt($('#image-width').val(), 10);
originalHeight = parseInt($('#image-height').val(), 10);
aspectRatio = originalWidth / originalHeight;
});
// Mouse Move Event
$('#image-display').mousemove(function (e) {
if (originalMouseX !== null && originalMouseY !== null) {
var currentMouseX = e.pageX;
var currentMouseY = e.pageY;
var differenceInWidth = originalMouseX - currentMouseX;
var differenceInHeight = originalMouseY - currentMouseY;
// Determine whether to adjust width or height based on mouse movement
if (Math.abs(differenceInWidth) > Math.abs(differenceInHeight)) {
// Adjust width and maintain aspect ratio
var newWidth = originalWidth - differenceInWidth;
var newHeight = Math.round(newWidth / aspectRatio);
$('#image-width').val(newWidth);
$('#image-height').val(newHeight);
} else {
// Adjust height and maintain aspect ratio
var newHeight = originalHeight - differenceInHeight;
var newWidth = Math.round(newHeight * aspectRatio);
$('#image-height').val(newHeight);
$('#image-width').val(newWidth);
}
refreshImage();
}
});
// Mouse Up Event
$('#image-display').mouseup(function (e) {
originalMouseX = null;
originalMouseY = null;
originalWidth = null;
originalHeight = null;
aspectRatio = null;
});
// Refresh Image Function
function refreshImage() {
var img = $('#image-display');
var imageWidth = parseInt($('#image-width').val(), 10);
var imageHeight = parseInt($('#image-height').val(), 10);
img.show();
var oldWidth = originalImageObject.width;
var oldHeight = originalImageObject.height;
// Show or hide download button based on dimension changes
if (oldWidth !== imageWidth || oldHeight !== imageHeight) {
$('#downloadresizedimage').show();
} else {
$('#downloadresizedimage').hide();
}
// Update aspect ratio
aspectRatio = oldWidth / oldHeight;
// Set new dimensions maintaining aspect ratio if necessary
// Here, we assume both width and height are provided and may not maintain aspect ratio
// If you want to maintain aspect ratio based on one input, adjust accordingly
canvas = $('#image-canvas')[0];
canvas.setAttribute('width', imageWidth);
canvas.setAttribute('height', imageHeight);
var context = canvas.getContext('2d');
context.drawImage(originalImageObject, 0, 0, canvas.width, canvas.height);
// Determine MIME type based on file extension
if (originalFileName.toLowerCase().indexOf('.jpg') >= 0 || originalFileName.toLowerCase().indexOf('.jpeg') >= 0) {
mimeType = 'image/jpeg';
} else if (originalFileName.toLowerCase().indexOf('.bmp') >= 0) {
mimeType = 'image/bmp';
} else if (originalFileName.toLowerCase().indexOf('.gif') >= 0) {
mimeType = 'image/gif';
} else if (originalFileName.toLowerCase().indexOf('.png') >= 0) {
mimeType = 'image/png';
} else if (originalFileName.toLowerCase().indexOf('.tif') >= 0) {
mimeType = 'image/tif';
}
img.attr('src', canvas.toDataURL(mimeType));
}
// Keyup Event for Width Input
$("#image-width").on('input', function () {
var newWidth = parseInt($(this).val(), 10);
if (jQuery.isNumeric(newWidth) && newWidth > 0) {
var newHeight = Math.round(newWidth / aspectRatio);
$('#image-height').val(newHeight);
}
refreshImage();
});
// Keyup Event for Height Input
$("#image-height").on('input', function () {
var newHeight = parseInt($(this).val(), 10);
if (jQuery.isNumeric(newHeight) && newHeight > 0) {
var newWidth = Math.round(newHeight * aspectRatio);
$('#image-width').val(newWidth);
}
refreshImage();
});
// Process File Function
function processFile(blob, fileName) {
originalFileName = fileName;
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.result;
$('![]()
', { src: base64data }).on('load', function () {
$('#image-display').show();
$('#file-drop-zone').addClass('collapsedDropZone');
$('#image-dimension-container').show();
originalImageObject = this;
var imageWidth = $('#image-width');
var imageHeight = $('#image-height');
imageWidth.val(originalImageObject.width);
imageHeight.val(originalImageObject.height);
imageWidth.focus();
imageWidth.select();
aspectRatio = originalImageObject.width / originalImageObject.height;
refreshImage();
});
}
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
function beautify(str) {
var result = '';
var length = str.length;
var i = 0;
var braceCountLeft = 0;
var braceCountRight = 0;
var withinQuotes = false;
while (i < length) {
var c = str[i];
if (c == '"' && (i == 0 || c[i - 1] != '\\')) {
// non-escaped quotes
withinQuotes = !withinQuotes;
}
if (!withinQuotes && (c == '}' || c == '{' || c == ',')) {
console.log('Start####' + result);
// look back and remove carriage returns and whitespace that are already there
var resultIndex = result.length - 1;
while (resultIndex >= 0 && (result[resultIndex] == ' ' || result[resultIndex] == '\r' || result[resultIndex] == '\n' || result[resultIndex] == '\t')) {
resultIndex = resultIndex - 1;
result = result.substr(0, resultIndex + 1);
console.log('char ' + result[resultIndex] + '-----' + result + 'zzz ' + result.length + ' ' + resultIndex);
}
if (c == '{') {
braceCountLeft++;
result += c + '\r' + GetTabs(braceCountLeft - braceCountRight);
} else if (c == '}') {
braceCountRight++;
// precede with carriage return
result += '\r' + GetTabs(braceCountLeft - braceCountRight) + c;
} else if (c == ',') {
result += c + '\r' + GetTabs(braceCountLeft - braceCountRight);
}
var nextChar = '';
// advance through whitespace and remove carriage returns that are already there
while (i < length && (str[i + 1] == ' ' || str[i + 1] == '\r' || str[i + 1] == '\n' || str[i + 1] == '\t')) {
i++;
}
} else {
result += str[i];
}
i++;
}
return result;
}
function GetTabs(count) {
var result = '';
for (var i = 0; i < count; i++) {
result += ' ';
}
return result;
}